<template>
	<view class="content" v-if="show==1">
		<view class="teacher">
			<image @click="laoshi" :src="goods.teacher.avatar" mode="aspectFit" class="avatar"></image>
			<view class="teacher2">
				<view class="teacher2-1">
					<view @click="laoshi" class="teacher2-1-1">S{{goods.teacher.id}}-{{goods.teacher.nickname}}</view>
					<!-- #ifdef MP-WEIXIN -->
					<image @click="jubao" class="map4" src="../../static/images/dian.png" mode="aspectFit"></image>
					<!-- #endif -->
				</view>
				<view class="teacher2-2">
					<view class="teacher2-2-1">{{goods.teacher.cate2}}</view>
					<view class="teacher2-2-2">距您{{juli}}km</view>
				</view>
				<view class="teacher2-2">
					<view class="teacher2-2-4">{{goods.teacher.px_year}}年装修经验</view>
					<view class="teacher2-2-5">{{zdtype==1?'㉿':'￥'}}{{goods.price}}</view>
				</view>
				<view class="teacher2-2" v-if="goods.teacher.is_real==1">
					<view class="teacher2-2-3">有实体店铺</view>
				</view>
				<!--<view class="teacher2-3">
					<text>评级：</text>
					<image v-for="a in goods.xingji" src="../../static/xing.png" mode="aspectFit"></image>
					<image v-for="a in goods.xingji2" src="../../static/xing2.png" mode="aspectFit"></image>
					<view class="juli">距您{{juli}}km</view>
				</view>-->
			</view>
		</view>
		<view class="address" @click="map">
			<image src="../../static/images/map3.png" mode="aspectFit"></image>
			<view class="address2">{{goods.teacher.address}}</view>
		</view>
		<view class="fenxian hg5"></view>
		<view class="qiehuan">
			<view class="qiehuan2" @click="qiehuan(1)">
				<view :class="type==1?'qiehuan3 qiehuan4':'qiehuan3'">服务详情</view>
			</view>
			<view class="qiehuan2" @click="qiehuan(2)">
				<view :class="type==2?'qiehuan3 qiehuan4':'qiehuan3'">服务评价</view>
			</view>
		</view>
		<view style="width:100%;" v-if="type==2">
			<view class="ping" v-for="c in comments">
				<view class="ping2">
					<image :src="c.avatar" mode="aspectFill"></image>
					<view class="ping3">
						<view class="ping4">{{c.nickname}}</view>
						<view class="ping5">
							<view class="ping5-1">{{c.createtime}}</view>
							<view class="ping5-2">
								<image v-for='b in c.xingji2' src="../../static/xing2.png" mode="aspectFit"></image>
								<image v-for='b in c.xingji' src="../../static/xing.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="ping6">{{c.content}}</view>
			</view>
			<view class="kong" v-if="!comments[0]">暂无评价数据</view>
		</view>
		<view v-if="type==1" style="width:100%;">
		<view class="content1">
			<view class="content2">工作分类:</view>
			<view class="content3" style="font-weight: 550;">{{goods.cate}}-{{goods.cate2}}</view>
		</view>
		<view class="content1">
			<view class="content2">服务分类:</view>
			<view class="content3">{{goods.fwcate}}</view>
		</view>
		<view class="content1">
			<view class="content2">服务时长:</view>
			<view class="content3" style="font-weight: 550;">{{goods.nianji}}</view>
		</view>
		<view class="content1">
			<view class="content2">总费用:</view>
			<view class="content3" style="font-weight: 550;">{{zdtype==1?'㉿':'￥'}}{{goods.price}}</view>
		</view>
		<view class="content1">
			<view class="content2">服务关键词:</view>
			<view class="content3">{{!goods.title?'暂无关键词':goods.title}}</view>
		</view>
		<view class="content1">
			<view class="content2">图片展示:</view>
			<view class="content3">
				{{!goods.images[0]?'暂无图片展示':''}}
				<image @click="imgs" :data-img="img" v-for="(img,index) in goods.images" :src="img" mode="widthFix"></image>
			</view>
		</view>
		</view>
		<view style="width:100%;height:55px;"></view>
		<view class="bottom" >
			<view class="bottom2" @click="home">
				<image src="../../static/images/shou.png" mode="widthFix"/>
				<view class="bottom4">首页</view>
			</view>
			<view class="bottom2" @click="coll">
				<image :src="goods.is_coll==1?'../../static/images/coll2.png':'../../static/images/coll.png'" mode="widthFix"/>
				<view class="bottom4">收藏</view>
			</view>
			<view class="bottom3">
				<view class="bottom5">
					<view class="bottom6" @click="ling">购买服务</view>
				</view>
			</view>
		</view>
		
		<view class="zheceng" v-if="is_jb==true" @click="jbclose"></view>
		<view class="jubaocause" v-if="is_jb==true">
			<view class="jubaocause2">
				<text>举报原因</text>
				<image src="../../static/cha.png" mode="aspectFit" @click="jbclose"></image>
			</view>
			<view class="jubaocause3">
				<textarea @input="cause" placeholder="请填写举报原因"></textarea>
			</view>
			<view class="jubaocause4">
				<view class="jubaocause4-1" @click="jbclose">取消</view>
				<view class="jubaocause4-2" @click="bao">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				id: 0,
				uid:0,
				show:0,
				zdtype:0,
				juli:0,
				type:1,
				page:1,
				next:0,
				is_jb:false,
				yuanyin:'',
				comments:[],
				goods:[]
			}
		},
		onLoad(op) {
			if(app.isBlank(op.id)==true){
				app.error_msg('参数错误');
			}else{
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==false){
					this.uid=uid;
				}
				var that=this;
				//#ifdef APP-PLUS
				uni.getSystemInfo({
				    success: function (res) {
						if(res.platform=='ios'){
							//that.zdtype=1;
						}
				    }
				});
				//#endif
				this.id=op.id;
				
				this.getdata();
			}
		},
		onNavigationBarButtonTap(){
			const uid = uni.getStorageSync('uid');
			if(app.isBlank(uid)==true){
				uni.showModal({
				    content: '请登录后操作',
					confirmText:'去登录',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				                url: '/pages/login/login'
				            });
				        }
				    }
				});
				return false;
			}
			
			var that=this;
			uni.showActionSheet({
			    itemList: ['举报', '拉黑'],
			    success: function (res) {
					if(res.tapIndex==0){
						that.is_jb=true;
					}else{
						uni.showModal({
						    title: '确定要拉黑该服务吗？',
						    content: '拉黑后，将不会再对您展示该服务',
						    success: function (res2) {
						        if (res2.confirm) {
						            that.lahei();
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
						
					}
			    },
			    fail: function (res) {
			        console.log(res.errMsg);
			    }
			});
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				
				uni.request({
				    url: app.globalData.url+"goods/detail",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:that.uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							if(res.data.code==4000){
								uni.removeStorageSync('uid');
							}
							app.error_msg(res.data.msg);
						}
						that.getjuli(res.data.data.goods.teacher.lat,res.data.data.goods.teacher.lng);
						that.goods=res.data.data.goods;
						that.show=1;
				    }
				});
			},
			getjuli(lat,lng){
				var that=this;
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						uni.request({
						    url: app.globalData.url+"goods/juli",
							method:"POST",
							dataType:"json",
							header: {
							    'content-type': 'application/x-www-form-urlencoded'
							},
						    data: {lat:res.latitude,lng:res.longitude,lat2:lat,lng2:lng},
						    success: (res2) => {
								that.juli=res2.data.data.juli;
						    }
						});
				    },
					fail(e){
						console.log(e);
					}
				});
			},
			getcomments(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"goods/comments",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,page:that.page},
				    success: (res) => {
						uni.hideLoading();
						that.comments=that.comments.concat(res.data.data.comments)
						that.next=res.data.data.next;
						that.page++;
				    }
				});
			},
			qiehuan(t){
				this.type=t;
				if(!this.comments[0] && t==2){
					this.page=1;
					this.next=0;
					this.getcomments();
				}
			},
			imgs(e){
				var that=this;
				uni.previewImage({
					current:e.currentTarget.dataset.img,
					urls: that.goods.images
				});
			},
			home(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			coll(){
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请先进行登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					                url: '/pages/login/login'
					            });
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				var that=this;
				uni.showLoading({
				    title: '请求中'
				});
				uni.request({
				    url: app.globalData.url+"goods/coll",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							if(res.data.code==4000){
								uni.removeStorageSync('uid');
							}else if(res.data.code==4001){
								uni.showModal({
								    content: '请先进行登录',
									confirmText:'去登录',
								    success: function (res) {
								        if (res.confirm) {
								            uni.navigateTo({
								                url: '/pages/login/login'
								            });
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
								return false;
							}
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1000
							});
							return false;
						}
						that.goods.is_coll=res.data.data.coll;
						uni.showToast({
						    title: res.data.msg,
						    duration: 1000
						});
				    }
				});
			},
			map(){
				var that=this;
				uni.openLocation({
					latitude: that.goods.lat,
					longitude: that.goods.lng,
					address:that.goods.address,
					success: function () {
						console.log('success');
					}
				});
			},
			jubao(){
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请登录后操作',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					                url: '/pages/login/login'
					            });
					        }
					    }
					});
					return false;
				}
				
				var that=this;
				uni.showActionSheet({
				    itemList: ['举报', '拉黑'],
				    success: function (res) {
						if(res.tapIndex==0){
							that.is_jb=true;
						}else{
							uni.showModal({
							    title: '确定要拉黑该服务吗？',
							    content: '拉黑后，将不会再对您展示该服务',
							    success: function (res2) {
							        if (res2.confirm) {
							            that.lahei();
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
							
						}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			lahei(){
				var that=this;
				uni.showLoading({
				    title: '请求中..'
				});
				const uid = uni.getStorageSync('uid');
				uni.request({
				    url: app.globalData.url+"index/lahei",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:uid,id:that.id,type:2},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						
						uni.showToast({
						    title: res.data.msg,
							icon:'success',
						    duration: 1500
						});
				    }
				});
			},
			jbclose(){
				this.yuanyin='';
				this.is_jb=false;
			},
			bao(){
				var that=this;
				if(app.isBlank(this.yuanyin)==true){
					uni.showToast({
					    title: "请填写举报原因",
						icon:'none',
					    duration: 1000
					});
					return false;
				}
				uni.showLoading({
				    title: '请求中..'
				});
				const uid = uni.getStorageSync('uid');
				uni.request({
				    url: app.globalData.url+"index/jubao",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:uid,id:that.id,cause:that.yuanyin,type:2},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						that.jbclose();
						uni.showToast({
						    title: res.data.msg,
							icon:'success',
						    duration: 1500
						});
				    }
				});
			},
			cause: function(event) {
			    this.yuanyin = event.target.value
			},
			ling(){
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请先进行登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					                url: '/pages/login/login'
					            });
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				uni.navigateTo({
				    url: '/pages/goods/buy?id='+this.id
				});
			},
			laoshi(){
				uni.navigateTo({
				    url: '/pages/teacher/detail?id='+this.goods.teacher.id
				});
			},
			onReachBottom(){
				if(this.next==1 && this.type==2){
					this.next=0;
					this.getcomments();
				}
			},
			onShareAppMessage(res) {
				var taht=this;
			    return {
			      title: that.goods.title,
			      path: '/pages/goods/detail?id='+that.id
			    }
			}
		}
	}
</script>

<style>
	.jubaocause4-2{width:100px;height:35px;line-height: 35px;background-color: #05c160;color:#fff;text-align: center;float: right;margin-top: 14px;border-radius: 3px;}
	.jubaocause4-1{width:100px;height:35px;line-height: 35px;background-color: #ccc;color:#fff;text-align: center;float: left;margin-top: 14px;border-radius: 3px;}
	.jubaocause4{width:90%;margin: 0 auto;height:50px;overflow: hidden;}
	.jubaocause3 textarea{width:94%;height:140px;font-size: 0.85rem;color:#333;line-height: 24px;padding: 5px 3%;}
	.jubaocause3{width:90%;height:150px;background-color: #f8f8f8;border-radius: 3px;margin: 0 auto;}
	.jubaocause2 image{width:20px;height:20px;float: right;margin-top: 10px;}
	.jubaocause2 text{font-weight: 550;}
	.jubaocause2{width:90%;margin: 0 auto;height:40px;overflow: hidden;line-height: 40px;}
	.jubaocause{width:300px;height:250px;position: fixed;top:50%;margin-top: -125px;left:50%;margin-left: -150px;background-color: #fff;z-index: 9999;border-radius: 5px;}
	.zheceng{width:100%;height:100vh;background-color: #000000;position: fixed;top:0px;opacity: 0.6;z-index:9995;}
	
	.kong{width:100%;text-align: center;margin-top: 20%;}
	.ping6{width:100%;line-height: 22px;margin-top: 5px;}
	.ping5-2 image{width:15px!important;height:15px!important;float: right;margin-right: 3px!important;margin-top: 2.5px;}
	.ping5-2{width:60%;height:20px;float: left;}
	.ping5-1{width:40%;height:20px;line-height: 20px;float: left;color:#999;}
	.ping5{width:100%;height:20px;overflow: hidden;}
	.ping4{width:100%;height:20px;line-height: 20px;overflow: hidden;}
	.ping3{width:100%;height:40px;flex:1;}
	.ping2 image{width:40px;height:40px;border-radius: 50%;margin-right: 10px;}
	.ping2{width:100%;display: flex;height:40px;}
	.ping{width:94%;padding: 7px 3%;border-bottom: 1px #eee solid;}
	
	.content3 image{width:100%;}
	.content3{width:100%;line-height: 20px;flex: 1;}
	.content2{width:90px;height:20px;line-height: 20px;}
	.content1{width:94%;padding: 5px 3%;display: flex;}
	.qiehuan4{color:#05c160!important;border-bottom: 1px #05c160 solid;}
	.qiehuan3{line-height: 32px;display: inline-block;padding: 0px 18px;font-size: 0.95rem;font-weight: 550;color:#333;}
	.qiehuan2{width:50%;height:33px;float: left;text-align: center;}
	.qiehuan{width:100%;overflow: hidden;margin-top: 5px;border-bottom: 1px #f3f3f3 solid;margin-bottom: 5px;}
	.juli{width:auto;color:red;font-size: 0.75rem;float: right;height:25px;overflow: hidden;max-width:100px;line-height: 30px;}
	.address2{width:100%;height:30px;line-height: 30px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;flex: 1;}
	.address image{width:15px;height:15px;margin-top: 8px;margin-right: 3px;}
	.address{width:94%;padding: 0px 3%;height:30px;display: flex;margin-bottom: 5px;}
	.teacher2-3 image{width:18px;height:18px;margin-top: 5px;float: left;margin-right: 5px;}
	.teacher2-3 text{float: left;}
	.teacher2-3{width:100%;height:25px;overflow: hidden;line-height: 30px;}
	.teacher2-2-1{width:60%;height:25px;line-height: 25px;color: #05c160;overflow: hidden;float: left;}
	.teacher2-2-2{width:40%;height:25px;line-height: 25px;overflow: hidden;float: right;color: #05c160;}
	.teacher2-2-3{width:100%;height:25px;line-height: 25px;overflow: hidden;}
	.teacher2-2-4{width:60%;height:25px;line-height: 25px;overflow: hidden;float: left;}
	.teacher2-2-5{width:40%;height:25px;line-height: 25px;overflow: hidden;float: right;color: red;}
	.teacher2-2{width:100%;height:25px;overflow: hidden;}
	.teacher2-1 .map4{width:20px;height:20px;margin-top: 2.5px;}
	.teacher2-1-1{width:100%;flex:1;height:25px;line-height: 25px;overflow: hidden;font-weight: 550;font-size: 1rem;color:#333;}
	.teacher2-1{width:100%;display: flex;}
	.teacher2{width:100%;height:100px;flex: 1;}
	.avatar{width:100px;height:100px;margin-right: 10px;border-radius: 3px;}
	.teacher{width:94%;padding: 0px 3%;display: flex;margin-top: 10px;}
	
	.bottom6{width:100%;height:40px;line-height: 40px;text-align: center;color:#fff;background-color: #05c160;}
	.bottom5{width:90%;height:40px;border-radius: 20px;margin-top: 5px;float: right;margin-right: 10px;overflow: hidden;}
	.bottom2 image{width:22px;margin-top: 5px;}
	.bottom4{width:100%;height:20px;line-height: 18px;font-size: 0.75rem;}
	.bottom2{width:15%;height:50px;float: left;text-align: center;}
	.bottom3{width:70%;height:50px;float: left;text-align: right;}
	.bottom{width:100%;height:51px;border-top:1px #eee solid;position: fixed;bottom: 0px;z-index: 9994;background-color: #fff;overflow: hidden;}
	
</style>
